// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: _root
    anchors.fill: parent

    function start(){
        if(!_chevronTimer.running){
            _chevronTimer.start();
        }
    }

    Timer{
        id: _chevronTimer
        running: false
        interval: 150
        repeat: true
        property int counter: 0
        onTriggered: {
            if(counter >= 3){
                _chevronTimer.stop();
                counter = 0;
            }else{
                _chevronRepeater.itemAt(counter).item.start();
                counter++;
            }
        }
    }
    Repeater{
        id: _chevronRepeater
        model: ListModel{}
        Loader{
            sourceComponent: _src
        }
        Component.onCompleted: {
            _chevronRepeater.model.append({"_src": _chevronComponent});
            _chevronRepeater.model.append({"_src": _chevronComponent});
            _chevronRepeater.model.append({"_src": _chevronComponent});
            _chevronRepeater.model.append({"_src": _chevronComponent});
        }
    }
    Component{
        id: _chevronComponent
        Image{
            id: _chevron
            x: _handle.x + 200 * viewScale
            y: _handle.default_y + _handle.height / 2 - height / 2
            width: 12 * viewScale
            height: 46 * viewScale
    //        x: _unlock.x + 70 * viewScale
    //        y: _handle.default_y + _handle.height / 2 - height / 2
    //        width: 36 * viewScale
    //        height: 138 * viewScale
            opacity: 0.0
            source: "images/ic_lockscreen_chevron_right.png"
            // 12x46
            // 24x92
            // 36x138
            function start(){
                _chevronAnim.start();
            }
            SequentialAnimation{
                id: _chevronAnim
                running: false
                ScriptAction{
                    script: {_chevron.opacity = 1.0;}
                }
                ParallelAnimation{
                    NumberAnimation{
                        target: _chevron
                        property: "x"
                        from: _handle.default_x + 200 * viewScale
                        to: _handle.default_x + (_handle.r + 60 * viewScale) * 0.8
                        duration: 360
                    }
                    NumberAnimation{
                        target: _chevron
                        property: "y"
                        from: _handle.default_y + _handle.height / 2 - height / 2
                        to: _handle.default_y + _handle.height / 2 - height / 2
                        duration: 360
                    }
                    NumberAnimation{
                        target: _chevron
                        property: "width"
                        from: 12 * viewScale
                        to: 36 * viewScale * 0.8
                        duration: 360
                    }
                    NumberAnimation{
                        target: _chevron
                        property: "height"
                        from: 46 * viewScale
                        to: 138 * viewScale * 0.8
                        duration: 360
                    }
                }
                ParallelAnimation{
                    NumberAnimation{
                        target: _chevron
                        property: "x"
                        to: _handle.default_x + (_handle.r + 60 * viewScale)
                        duration: 360
                    }
                    NumberAnimation{
                        target: _chevron
                        property: "y"
                        to: _handle.default_y + _handle.height / 2 - height / 2
                        duration: 360
                    }
                    NumberAnimation{
                        target: _chevron
                        property: "width"
                        to: 36 * viewScale
                        duration: 360
                    }
                    NumberAnimation{
                        target: _chevron
                        property: "height"
                        to: 138 * viewScale
                        duration: 360
                    }
                    NumberAnimation{
                        target: _chevron
                        property: "opacity"
                        to: 0.0
                        duration: 360
                    }
                }
            }
        }
    }
}
